/*
 * Copyright 2022 LookerSong
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

var ctx0;

export default {
    props: {
        setwidth: 0,        // 图片宽度
        setheight: 0,       // 图片高度
        setsrc: "",     // 图片地址
        scale: 2,       // 放大比例
    },
    data: {
        initwidth: 0,       // 接收源图的宽度
        initheight: 0,      // 接收源图的高度
        points: {       // 原图的裁剪起点坐标（左上角）
            x: 0,
            y: 0
        },
        zoom_flag: false,
        img: new Image(),
    },

    onInit() {
        this.img.src = this.setsrc;
        var sss = setTimeout(()=> {
            this.onShow();
        }, 50);
    },

    onShow() {
        this.refer();
    },

    // 画图初始化
    refer() {
        ctx0 = this.$refs.test.getContext('2d');
        var init = new Image();
        init.src = this.img.src
        init.onload = ()=> {
            ctx0.drawImage(init, 0, 0, init.width, init.height, 0, 0, this.setwidth, this.setheight);
            this.initwidth = init.width;
            this.initheight = init.height;
        };
    },

    // 切换镜头远近
    zoomswitch() {
        this.zoom_flag = !this.zoom_flag;
        console.info("切换镜头远近");

        var changeview = new Image();
        changeview.src = this.img.src;
        if(true == this.zoom_flag) {
            console.info("拉近镜头");
            changeview.onload = ()=> {
                ctx0.drawImage(changeview,
                    this.initwidth / 2 - this.initwidth / this.scale / 2,
                    this.initheight / 2 - this.initheight / this.scale / 2,
                    changeview.width / this.scale,
                    changeview.height / this.scale,
                    0, 0,
                    this.setwidth, this.setheight);
            };
        }
        else {
            console.info("恢复全局视角");
            changeview.onload = ()=> {
                ctx0.drawImage(changeview,
                    0, 0,
                    this.initwidth, this.initheight,
                    0, 0,
                    this.setwidth, this.setheight);
                console.info(JSON.stringify(changeview));
                console.info("当前视图——宽：" + changeview.width + ",高：" + changeview.height);
            };
        }
    },

    // 在图片区域内移动可视区域
    getmove(event) {
        if(false == this.zoom_flag) {
            console.info("未进入放大模式，无法移动");
            return;
        }

        this.points.x = (event.touches[0].localX - this.setwidth / this.scale / 2) / this.setwidth * this.initwidth;
        this.points.y = (event.touches[0].localY - this.setheight / this.scale / 2) / this.setheight * this.initheight;

        if(((this.setwidth / this.scale / 2) > event.touches[0].localX)
        || ((this.setwidth - this.setwidth / this.scale / 2) < event.touches[0].localX)) {
            console.info("视角横坐标太靠近边缘");
            if((this.setwidth / this.scale / 2) > event.touches[0].localX) {
                console.info("太靠近左边");
                this.points.x = 0;
            }
            else {
                console.info("太靠近右边");
                this.points.x = this.initwidth - this.initwidth / this.scale;
            }
        }
        if(((this.setheight / this.scale / 2) > event.touches[0].localY)
        || ((this.setheight - this.setheight / this.scale / 2) < event.touches[0].localY)) {
            console.info("视角纵坐标太靠近边缘");
            if((this.setheight / this.scale / 2) > event.touches[0].localY) {
                console.info("太靠近上边");
                this.points.y = 0;
            }
            else {
                console.info("太靠近下边");
                this.points.y = this.initheight - this.initheight / this.scale;
            }
        }

        var newview = new Image();
        newview.src = this.img.src;
        newview.onload = ()=> {
            ctx0.drawImage(newview,
                this.points.x, this.points.y,
                newview.width / this.scale, newview.height / this.scale,
                0, 0,
                this.setwidth, this.setheight);
        };
    },
}
